<style >
.mapBox{
    padding:0 30px;
}
#mapSvg .nodetext {
        font-size: 12px ;
        font-family: SimSun;
        fill:#000000;
    }
   #mapSvg .linetext {
        font-size: 12px ;
        font-family: SimSun;
        fill:#1f77b4;
        fill-opacity:0.0;
    }

   #mapSvg .circleImg {
        /*stroke: #ff7f0e;*/
        stroke-width: 3px;
    }
   #mapSvg .relative{
        /*position: relative;*/
    }
  #mapSvg  #d3{
         box-sizing: border-box;
         display: block;
        position: relative;
        /*top: -260px;*/
        z-index: 0;
     }
  #mapSvg  #d3 svg{
        box-sizing: border-box;
        display: block;

    }
  #mapSvg  .ceshi{
        box-sizing: content-box;
        display: block;
        height:900px;

    }

   #mapSvg .node circle {
        fill: #fff;
        stroke: steelblue;
        stroke-width: 3px;
    }

  #mapSvg  .node {
        font: 12px sans-serif;
    }

   #mapSvg .link {
        fill: none !important;
        stroke: #ccc !important;
        stroke-width: 3px !important;
    }
  #mapSvg  .d1{
        stroke:#E00001 !important;
        fill: #E00001 !important;
    }
   #mapSvg .d2{
        fill:#fe8400 !important;
        stroke:#fe8400 !important;
    }
   #mapSvg .d3{
        fill:#ffd700 !important;
        stroke:#ffd700 !important;
    }
   #mapSvg .d4{
        fill:#86da0f !important;
        stroke:#86da0f !important;
    }
   #mapSvg .d5{
        fill:#24b9fe !important;
        stroke:#24b9fe !important;
    }
   #mapSvg .d6{
        fill:#2bebd2 !important;
        stroke:#2bebd2 !important;
    }
   #mapSvg .d7{
        fill:#ae59ee !important;
        stroke:#ae59ee !important;
    }
   #mapSvg .d8{
        fill:#ff6dbc !important;
        stroke:#ff6dbc !important;
    }
  #mapSvg  .d9{
        fill:#7f6ffa !important;
        stroke:#7f6ffa !important;
    }
   #mapSvg .lizhi1{
        fill:rgb(153, 153, 153) !important;
        stroke:rgb(153, 153, 153) !important;
    }
   
  #mapSvg  .aaa{
        /* height:950px; */
    }
   #mapSvg .biaoshi .juese:before{
        content: ' ';
        width: 15px;
        height: 15px;
        display: inline-block;
        border: 3px solid red;
        vertical-align: middle;
        border-radius: 50%;
        margin-right:5px;
    }
   #mapSvg .aaa svg{
        /*padding-top: 10px;*/
        overflow: initial;
    }
   #mapSvg .biaoshi{
        background-color: #fff;height: 40px;line-height: 40px;
        text-align: right;
        padding-right: 15px;
    }
   #mapSvg .biaoshi .juese{
        margin-left: 10px;
    }
   #mapSvg .biaoshi .juese:nth-child(1):before{
        border-color:#E00001 ;
        background-color: #E00001;
    }
   #mapSvg .biaoshi .juese:nth-child(2):before{
        border-color:#fe8400 ;
        background-color:#fe8400 ;
    }
   #mapSvg .biaoshi .juese:nth-child(3):before{
        border-color:#ffd700 ;
        background-color:#ffd700 ;
    }
   #mapSvg .biaoshi .juese:nth-child(4):before{
        border-color:#86da0f ;
        background-color:#86da0f ;
    }
   #mapSvg .biaoshi .juese:nth-child(5):before{
        border-color:#24b9fe ;
        background-color:#24b9fe ;
    }
   #mapSvg .biaoshi .juese:nth-child(6):before{
        border-color:#2bebd2 ;
        background-color:#2bebd2 ;
    }
   #mapSvg .biaoshi .juese:nth-child(7):before{
        border-color:#ae59ee ;
        background-color:#ae59ee ;
    }
  #mapSvg  .biaoshi .juese:nth-child(8):before{
        border-color:#ff6dbc ;
        background-color:#ff6dbc ;
    }
   #mapSvg .biaoshi .juese:nth-child(9):before{
        border-color:#7f6ffa ;
        background-color:#7f6ffa ;
    }

  #mapSvg  .biaoshi .lizhi.juese:before{
        border-color:rgb(153, 153, 153) ;
        background-color:rgb(153, 153, 153) ;
    }
     #mapSvg .biaoshi .juese#jueseNo{
        fill: #fff !important;
        stroke: steelblue !important; 
        stroke-width: 3px !important;
}
    .line{
    height: 0px;
    border-bottom: 1px solid #ddd;
}
</style>
<template>
    <div>
        <product-title></product-title>
        <div class="mapBox">
            <h3 class="search-h3">快速搜索</h3>
        </div>
        <div class="common-box-body mapBox">
            <Row>
                <Form >
                    <Col :lg="6" :md="24">
                        <FormItem label="分支结构">
                            <Select v-model="yun_org_id">
                                <Option value="0">本公司</Option>
                                <Option v-for="item in allJG" :value="item._id" :key="item._id">{{item.shortn}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :lg="6" :md="24">
                        <FormItem label="在职状态">
                            <Select v-model="status">
                                <Option value="1">在职</Option>
                                <Option value="0">全部</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :lg="6" :md="24">
                        <FormItem >
                            <Select @on-change="mapReset" v-model="zhiji">
                                <Option value="工号">工号</Option>
                                <Option value="职级">职级</Option>
                                <Option value="分部">分部</Option>
                                <Option value="分支机构">分支机构</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col :lg="6" :md="24" style="text-align:right;">
                        <Button type="info" icon="ios-search" @click="makeMap">搜索</Button>
                        <Button class="tRight" @click="$router.back(-1)" type="primary" size="large">返回</Button>
                    </Col>
                </Form>
            </Row>
            <Row>
                <div class="line"></div>
            </Row>
            <Row>
                <div id="mapSvg" class="mapBox">
                    <div class="biaoshi">
                        <span v-for="(item,index) in biaoshi" class="juese">{{item.name}}</span>
                        <span class="juese lizhi">离职</span>
                        <!-- <span class="juese " id="jueseNo">未设置职级</span> -->
                    </div>
                    <div class="aaa" id="aaa" ref="mybox" ></div>
                </div>
            </Row>
        </div>
    </div>
</template>
<script>
import * as d3 from 'd3'
import productTitle from '../../components/productTitle'
import {bloodMap,frameworkMap,allJG} from '../../api/employee'
export default({
    data(){
        return {
            status:'1',
            biaoshi:[],
            allJG:[],
            yun_org_id:'0',
            one:false,
            zhiji:'',
        }
    },
    components:{
        productTitle
    },
    created(){
        this.makeMap();
        this.alljiG();

    },

    methods:{
        alljiG(){
            new Promise((rev,rej)=>{
                allJG().then(res=>{
                    if(res.data.err==0){
                        this.allJG = res.data.data;
                    }else{
                        this.$Message('暂无可选机构');
                    }
                    rev();
                }).catch(error=>{
                    rej(error);
                })
            })
        },
        makeMap(){
            if(this.one){
                this.$refs.mybox.innerHTML=""
            }
            var data={
                status:this.status,
                yun_org_id:this.yun_org_id
            }
            function click1(d) {
            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else {
                d.children = d._children;
                d._children = null;
            }
            update(d);
            }
            new Promise((rev,rej)=>{
                frameworkMap(data).then(res=>{
                this.biaoshi = res.data.rank_data;
                this.one = true;
                let _this = this;
                var root = res.data.data;
                // if(root.name){
                    if(!root.children||root.children.length<2){
                        this.$refs.mybox.style.paddingTop="200px";
                    }else{
                        this.$refs.mybox.style.paddingTop="0px";
                    }
                    var width = 950,
                    height = 950;
                var tree = d3.layout.tree()
                    .size([width, height-200])
                    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

                var diagonal = d3.svg.diagonal()
                    .projection(function(d) { return [d.y, d.x]; });

                var svg = d3.select(".aaa").append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(40,0)");
                     var nodes = tree.nodes(root);
                var links = tree.links(nodes);
                var link = svg.selectAll(".link")
                    .data(links)
                    .enter()
                    .append("path")
                    .attr("class", "link")
                    .attr("d", diagonal);

                var node = svg.selectAll(".node")
                    .data(nodes)
                    .enter()
                    .append("g")
                    .attr("class", "node")
                    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

                node.append("circle")
                    .attr("r", 6.5)
                    .attr('class',function(d){
                        if(d.status==2){
                            return 'lizhi1';
                        }else{
                            return 'd'+(d.depth*1+1);
                        }
                    })

                node.append("text")
                    .attr("dx", function(d) { return d.children ? -8 : 8; })
                    .attr("dy", 3)
                    .attr('class','d0')
                    .style('fill', function (d) {
                        if(d.status==2){
                            return 'rgb(153, 153, 153) '
                        }
                    })
                    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
                    .html(function(d) { return '&nbsp;&nbsp;'+d.name; })
                // }
               
                    rev();
                }).catch(error=>{
                    rej(error);
                })
            })
             
            
        
        },
        mapReset(){
            if(this.one){
                this.$refs.mybox.innerHTML=""
            }
            var _this = this;
            var data={
                status:this.status,
                yun_org_id:this.yun_org_id
            }
            new Promise((rev,rej)=>{
                frameworkMap(data).then(res=>{
                this.biaoshi = res.data.rank_data;
                this.one = true;
                var root = res.data.data;
                // if(root.name){
                    if(!root.children||root.children.length<2){
                        this.$refs.mybox.style.paddingTop="200px";
                    }else{
                        this.$refs.mybox.style.paddingTop="0px";
                    }
                    var width = 950,
                    height = 950;
                var tree = d3.layout.tree()
                    .size([width, height-200])
                    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

                var diagonal = d3.svg.diagonal()
                    .projection(function(d) { return [d.y, d.x]; });

                var svg = d3.select(".aaa").append("svg")
                    .attr("width", width)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(40,0)");
                     var nodes = tree.nodes(root);
                var links = tree.links(nodes);
                var link = svg.selectAll(".link")
                    .data(links)
                    .enter()
                    .append("path")
                    .attr("class", "link")
                    .attr("d", diagonal);

                var node = svg.selectAll(".node")
                    .data(nodes)
                    .enter()
                    .append("g")
                    .attr("class", "node")
                    .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

                node.append("circle")
                    .attr("r", 6.5)
                    .attr('class',function(d){
                        if(d.status==2){
                            return 'lizhi1';
                        }else{
                            return 'd'+(d.depth*1+1);
                        }
                    })

                node.append("text")
                    .attr("dx", function(d) { return d.children ? -8 : 8; })
                    .attr("dy", 3)
                    .attr('class','d0')
                    .style('fill', function (d) {
                        if(d.status==2){
                            return 'rgb(153, 153, 153) '
                        }
                    })
                    .style("text-anchor", function(d) { return d.children ? "end" : "start"; })
                    .html(function(d) { 
                        var str ="";
                        if(_this.zhiji=='工号'){
                            str = d.name+'('+d.job_code+')';
                        }else if(_this.zhiji=='职级'){
                            str = d.name+'('+d.rank_name+')'
                        }else if(_this.zhiji=='分部'){
                            str = d.name+'('+d.branch+')'
                        }else if(_this.zhiji=='分支机构'){
                            str = d.name+'('+d.org_name+')'
                        }
                        console.log(str);
                        return str;
                        })
                // }
               
                    rev();
                }).catch(error=>{
                    rej(error);
                    
                })
            })
        },
       
    }
})
</script>